<template>
  <div>
    <el-steps :active="2" class="stepsBox" finish-status="success" simple style="margin-top:20px;margin-left:30px;width:900px;height:50px;">
      <el-step title="选择活动类型"/>
      <el-step title="选择商品"/>
      <el-step title="设置方案"/>
    </el-steps>
    <el-form ref="schemeForm" :rules="rules" :model="schemeForm" label-width="200px">
      <el-form-item label="商品原价">
        <div>{{ schemeForm.originalCost }}</div>
      </el-form-item>
      <el-form-item label="拼团人数" prop="peopleNum">
        <el-input v-model="schemeForm.peopleNum" type="number" placeholder="请输入活动人数，人数为2～9人" style="width:40%"/>
      </el-form-item>
      <el-form-item label="团长价格(发起人)" prop="groupCost">
        <el-input v-model="schemeForm.groupCost" placeholder="请输入团长购买价格" style="width:40%"/>
      </el-form-item>
      <el-form-item label="团员价格(参与人)" prop="groupPeopleCost">
        <el-input v-model="schemeForm.groupPeopleCost" placeholder="请输入团员购买价格" style="width:40%"/>
      </el-form-item>
      <div class="el-form-item">
        <label for="robot" class="el-form-item__label" style="width: 200px;">
          <span>
            开启机器人
            <i class="el-icon-warning-outline iconInfoTag" @click="hintDialog"/>
          </span>
        </label>
        <el-switch
          v-model="schemeForm.robot"
          class="switchStyle switchTop"
          active-color="#20a0ff"
          inactive-color="#bfcbd9"
          active-text="ON"
          inactive-text="OFF"
          @change="hintSwitchDialog($event)"
        />
      </div>
      <el-form-item>
        <el-button type="primary" @click="submitBtn">保 存</el-button>
      </el-form-item>
    </el-form>
    <!-- 开启机器人弹框 -->
    <el-dialog :visible.sync="dialogVisible" title="机器人规则" width="50%">
      <ul class="hintDialog-ul">
        <li>1、拼团机器人是用于帮助成单使用，开启后机器人将会按照默认加入规则，自动参团；</li>
        <li>2、拼团机器人开启后，学员在发起或者参加拼团，团员未能成功邀请到其他参团人员时，机器人将会自动参团，帮助拼团成功；</li>
        <li>3、热销商品建议不要开启机器人，提高商品收入；</li>
        <li>4、开启机器人后，被邀请页面将会看见开团价格，以吸引更多学员开团，但是开团价格和参团价格不宜差距太大；</li>
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="switchDialogVisible" title="机器人规则" width="50%">
      <ul class="hintDialog-ul">
        <li>1、拼团机器人是用于帮助成单使用，开启后机器人将会按照默认加入规则，自动参团；</li>
        <li>2、拼团机器人开启后，学员在发起或者参加拼团，团员未能成功邀请到其他参团人员时，机器人将会自动参团，帮助拼团成功；</li>
        <li>3、热销商品建议不要开启机器人，提高商品收入；</li>
        <li>4、开启机器人后，被邀请页面将会看见开团价格，以吸引更多学员开团，但是开团价格和参团价格不宜差距太大；</li>
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button @click="switchDialogClose">关 闭</el-button>
        <el-button type="primary" @click="switchDialogVisible = false">打 开</el-button>
      </span>
    </el-dialog>
    <div class="foot-tip">
      <p>建议：</p>
      <ul>
        <li>1、开团即为主动发起拼团，此用户可以理解为团长身份，价格优惠力度可以大于参团价格优惠。</li>
        <li>2、参团即为加入他人发起的拼团，价格优惠力度可以小于开团价格。</li>
        <li>3、拼团机器人开启后，学员在发起或者参加拼团，团员未能成功邀请到其他参团人员时，机器人将会自动参团，帮助拼团成功。</li>
        <li>4、活动一旦开启系统将自动以团长身份开启一个团，以促进学员参与活动。</li>
      </ul>
    </div>
    <!-- 方案确认弹框 -->
    <el-dialog :visible.sync="schemeDialogVisible" title="方案确认" width="50%">
      <el-form label-width="130px">
        <el-form-item label="商品名称">
          <span>{{ schemeForm.courseName }}</span>
        </el-form-item>
        <el-form-item label="活动类型">
          <span>{{ schemeForm.activityType }}</span>
        </el-form-item>
        <el-form-item label="商品原价">
          <span>￥&nbsp;{{ schemeForm.originalCost }}</span>
        </el-form-item>
        <el-form-item label="拼团人数">
          <span>{{ schemeForm.peopleNum }}</span>
        </el-form-item>
        <el-form-item label="团长价格">
          <span>￥&nbsp;{{ schemeForm.groupCost }}</span>
        </el-form-item>
        <el-form-item label="团员价格">
          <span>￥&nbsp;{{ schemeForm.groupPeopleCost }}</span>
        </el-form-item>
        <el-form-item label="拼团机器人">
          <span>{{ schemeForm.robot == true ? '打开' : '关闭' }}</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="schemeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveSchemeBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      schemeForm: {
        // 路由传递过来的课程名称
        courseName: '',
        activityType: '多人拼团',
        originalCost: '3980.00元',
        peopleNum: '6',
        groupCost: '12.00',
        groupPeopleCost: '13.00',
        robot: false
      },
      rules: {
        peopleNum: [
          { required: true, message: '请输入拼团人数', trigger: 'blur' },
          { min: 1, max: 1, message: '拼团数为2-9人', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              if (Number.isInteger(Number(value)) && Number(value) > 1 && Number(value) < 10) {
                callback()
              } else {
                callback(new Error('拼团数为2-9人'))
              }
            },
            trigger: 'blur'
          }
        ],
        groupCost: [{ required: true, message: '请输入价格', trigger: 'blur' }],
        groupPeopleCost: [{ required: true, message: '请输入价格', trigger: 'blur' }]
      },
      // 机器人提示dialog对话框默认隐藏
      dialogVisible: false,
      // 点击switch机器人dialog对话框默认隐藏
      switchDialogVisible: false,
      // 方案确认弹框默认隐藏
      schemeDialogVisible: false
    }
  },
  created() {
    this.getParams()
  },
  methods: {
    // 获取路由传递过来的参数
    getParams() {
      this.schemeForm.courseName = this.$route.params.courseName
    },
    hintDialog() {
      this.dialogVisible = true
    },
    // switch状态切换事件
    hintSwitchDialog($event) {
      this.schemeForm.robot = $event
      if ($event === true) {
        this.switchDialogVisible = true
      }
    },
    // switch弹框关闭按钮事件
    switchDialogClose() {
      this.switchDialogVisible = false
      this.schemeForm.robot = false
    },
    // 设置方案保存按钮事件
    submitBtn() {
      this.schemeDialogVisible = true
    },
    // 方案确认按钮事件
    saveSchemeBtn() {
      this.schemeDialogVisible = false
      this.$message({
        type: 'success',
        message: '保存成功'
      })
      this.$router.push({ name: 'SelfTinysaleActivity' })
    }
  }
}
</script>
<style lang="scss">
.stepsBox {
  padding: 20px 30px;
}
.iconInfoTag {
  color: #20a0ff;
  cursor: pointer;
}
.hintDialog-ul {
  list-style: none;
  margin: 0;
  li {
    color: #a1a1a1;
    font-size: 15px;
    margin-bottom: 5px;
    line-height: 1.5;
  }
}
.foot-tip {
  margin: 0 20px;
  padding: 10px 20px;
  color: #54b3e8;
  border-color: #d6ebfa;
  background-color: #edf6fd;
  p {
    font-weight: 600;
  }
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      margin-bottom: 5px;
      line-height: 1.5;
    }
  }
}

// switch文字定位设置
.switchTop {
  margin-top: 10px;
}
.switchStyle .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
.switchStyle .el-switch__label--left {
  z-index: 9;
  left: 20px;
}
.switchStyle .el-switch__label--right {
  z-index: 9;
  left: -2px;
}
.switchStyle .el-switch__label.is-active {
  display: block;
}
.switchStyle.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 54px !important;
}
</style>

